<template>
	<c-popup v-model="modalFlag" radius="8" showClose="false" maskabled="false">
		<view class="c-modal">
			<view class="c-modal-hd" v-if="showTitle_">
				<view class="c-modal__title">{{title}}</view>
			</view>
			<view class="c-modal-bd" >
				<view class="c-modal__content" v-if="content">
					{{content}}
				</view>
				<slot></slot>
			</view>
			<view class="c-modal-ft c-underline__top">
				<c-button class="c-modal__btn c-modal__btn--default" v-if="showCancel_" @click="handleCancel" :style="{ color: cancelColor }">{{cancelText}}</c-button>
				<c-button class="c-modal__btn c-modal__btn--primary" v-if="showConfirm_" @click="handleConfirm" :style="{ color: confirmColor }">
					<c-loading v-if="loading" color="confirmColor"></c-loading>
					{{loading ? '' : confirmText}}
				</c-button>
			</view>
		</view>
	</c-popup>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
				
			},
			/**
			 * 提示的标题
			 */
			title: {
				type: [ String, Boolean ],
				default: '提示'
			},
			/**
			 * 提示的内容
			 */
			content: {
				type: String,
				default: ''
			},
			/**
			 * 是否显示取消按钮，默认为 true
			 */
			showCancel: {
				type: [ String, Boolean ],
				default: true
			},
			/**
			 * 取消按钮的文字，默认为"取消"，最多 4 个字符
			 */
			cancelText: {
				type: String,
				default: '取消'
			},
			/**
			 * 取消按钮的文字颜色，默认为"#666666"
			 */
			cancelColor: {
				type: String,
				default: '#666666'
			},
			/**
			 * 是否显示确定按钮，默认为 true
			 */
			showConfirm: {
				type: [ String, Boolean ],
				default: true
			},
			/**
			 * 确定按钮的文字，默认为"确定"，最多 4 个字符
			 */
			confirmText: {
				type: String,
				default: '确定'
			},
			/**
			 * 确定按钮的文字颜色，默认为"#0260fe"
			 */
			confirmColor: {
				type: String,
				default: '#0260fe'
			},
			/**
			 * 是否开启异步关闭，H5平台默认为"#007aff"
			 */
			asyncClose: {
				type: [ String, Boolean ],
				default: false
			}
		},
		computed: {
			modalFlag: {
				get(val) {
					return val.value;
				},
				set(val){
					this.$emit('input', val);
				}
			},
			showCancel_() {
				return String(this.showCancel) === 'false' ? false : true;
			},
			showConfirm_() {
				return String(this.showConfirm) === 'false' ? false : true;
			},
			showTitle_() {
				return String(this.title) === 'false' ? false : true;
			},
			asyncClose_() {
				return String(this.asyncClose) === 'false' ? false : true;
			}
		},
		data() {
			return {
				loading: false,//确认按钮loading状态
			}
		},
		watch: {
			// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
			// 避免下次打开的时候，状态混乱
			value(n) {
				if (n === true) this.loading = false;
			}
		},
		methods: {
			clearLoading() {
				this.loading = false;
			},
			handleCancel() {
				this.$emit('input', false);
				let res = {
					type: 'confirm',
					detail: {
						value: false
					}
				}
				this.$emit('cancel', res);
				this.$emit('change', res);
			},
			handleConfirm() {
				if(this.asyncClose_){
					this.loading = true;
				}else{
					this.$emit('input', false);
				}
				let res = {
					type: 'confirm',
					detail: {
						value: true
					}
				}
				this.$emit('confirm', res);
				this.$emit('change', res);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-modal{
		width: 600rpx;
		text-align: center;
		&-hd{
			padding: 24rpx 48rpx 8rpx;
		}
		&__title{
			font-size: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-weight: 400;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-wrap;
		}
		&-bd{
			min-height: 80rpx;
			font-size: 30rpx;
			line-height: 1.4;
			color: #999;
			max-height: 800rpx;
			overflow-y: auto;
		}
		&__content{
			padding: 40rpx 48rpx;
		}
		&-ft{
			position: relative;
			font-size: 36rpx;
			line-height: 96rpx;
			@include flex(row);
		}
		&__btn{
			flex: 1;
			color: #3cc51f;
			border: none;
			background-color: transparent;
			text-decoration: none;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			position: relative;
			cursor: pointer;
		}
		/deep/ button{
			height: 96rpx;
			&::after{
				display: none;
			}
		}
	}
</style>
